<template>
    <div>
        <div style="display: flex; flex-direction: row;align-items: center;justify-content: space-between;
        border: #ddd 1px solid;border-radius: 5px;height: 35px;line-height: 35px;padding: 0 10px;"
        @click="singleSelectAction()">
            <div v-if="content" style="color: #333;">{{content}}</div>
            <div v-else style="color: #ccc;">请选择</div>
            <i class="el-icon-search" style="color: #bbb;"></i>
        </div>

        <el-dialog :visible.sync="isShow" width="1000px" append-to-body>
            <el-row>
                <el-col :span="24" class="top">
                <Search @handleSearch="handleSearch" :formData="formData" :formOptions="formOptions"></Search>
                <div style="margin-top: 20px;"></div>
                <Table :itemList="itemList" :formData="formData" :dictOptions="dictOptions" selectType="single" @rowClick="rowClick"></Table>
                <pagination
                    style="background: #ffffff; height: 50px"
                    v-show="totalSize > 0"
                    :total="totalSize"
                    :page.sync="page"
                    :limit.sync="size"
                    @pagination="getItemList"
                />
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
import { getItemList, getFormDataByFormKey } from '@/api/interface/operate.js'
import { getFieldListOptionByFormId, getFieldFormOptionByFormId } from '@/api/interface/form.js'
export default{
    props:{
        relatedModel: {
            type: String,
            default: ''
        },
        relatedKey: {
            type: String,
            default: ''
        },
        content: {
            type: String,
            default: ''
        },
        filter: {
          type: Object,
          default: ()=>{}
        }
    },
    data(){
        return{
            page: 1,
            size: 20,
            totalSize: 0,
            itemList: [],
            searchParams: {},
            isShow: false,
            url: '',
            formId: '',
            formData: {},
            formOptions: {},
            dictOptions: {}
        }
    },
    watch: {
        relatedKey: {
          handler(val){
          }
        },
      },
    methods:{
        singleSelectAction(){
            // this.$refs.singleSelectDialog.item = val
            // this.isShow = true
            this.$emit('singleSelectAction')
        },
        show(){
          this.isShow = true
          this.getFormData()
        },
        close(){
            this.isShow = false
        },
        rowClick(val){
            this.isShow = false
            this.$emit('rowClick', this.relatedModel, this.relatedKey, val)
        },
        handleSearch(searchParams){
          this.searchParams = Object.assign(this.filter, searchParams)
          this.page = 1
          this.getItemList()
        },
        // 获取表单配置数据
        getFormData(){
            getFormDataByFormKey({formKey: this.relatedKey}).then(res=>{
            if (res.data.code == 10000) {
              this.formData = res.data.data
              // this.$route.meta.fieldList = res.data.data.fieldList
              // this.$route.meta.fieldFormList = res.data.data.fieldFormList
              // this.$route.meta.operateList = res.data.data.operateList
              this.url = this.formData.formModel.url
              this.formId = this.formData.formModel.id
              this.handleSearch()
              this.getFieldFormOptionByFormId()
              this.getFieldListDictFun()
            }
          })
        },
        // 获取列表数据
        getItemList() {
          this.searchParams.page = this.page
          this.searchParams.size = this.size
          getItemList(this.url, this.searchParams).then(res => {
            if (res.data.code == 10000) {
              this.totalSize = res.data.data.total_count
              this.itemList = res.data.data.list
            }
          });
        },
        // 获取字典
        getFieldFormOptionByFormId(){
            getFieldFormOptionByFormId({
            formId: formId
            }).then(res=>{
            if(res.data.code == 10000){
                this.formOptions = res.data.data
            }
            })
        },
        // 获取字典
        getFieldListDictFun(){
          getFieldListOptionByFormId({
            formId: formId
          }).then(res=>{
            if(res.data.code == 10000){
              this.dictOptions = res.data.data
            }
          })
        },
    },
}
</script>
<style scoped lang='scss'>

</style>
